<template>
  <TableTemplate >
    <template #table-extra>
        <el-button :icon="Plus" type="primary" @click="handleEdit">添加</el-button>
    </template>
    <template #operator="{scope}">
      <el-button size="small" type="primary" @click="handleEdit(scope.row)"  >编辑</el-button>
      <el-popconfirm title="你要删除?">
        <template #reference>
          <el-button size="small" type="danger" >删除</el-button>
        </template>
      </el-popconfirm>
    </template>
  </TableTemplate>
  <my-form ref="child" :api="{
    create : create,
    update : update,
  }" ></my-form>
</template>


<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import myForm from "@/views/role/form.vue"
import { ref} from "vue";
import {getRoleList,create, update} from "@/api/role";
import type {TableColumn} from "@/components/type/table";
import {useTableData} from "@/hook/useTableData";

const columns: TableColumn[] = [
  {
    prop: 'id',
    label: '角色ID'
  },
  {
    prop: 'name',
    label: '角色名称',
    search: {
      isSearch: true,
      placeholder: '请输入角色名称',
      type: 'input'
    },
  },
  {
    prop: 'operator',
    label: '操作',
    slot: true,
  },
]
const TableTemplate = useTableData({
  columns,
  isShowPage: true,
  request: async (params:any) => {
    return await getRoleList(params)
  }
})
const child = ref()
const handleEdit = (row:Object) => {
  child.value.openDialog(row)
}
</script>